<template>
  <div id="commentMsg">
    <div class="head-message">
      <div class="all clear">
        <div class="left">
          <div class="clear">
            <a-avatar @click="seeUserInfo(blog.user.userId)" class="avatar cursor" :src="blog.user.avatar" title="查看用户详情" />
            <span class="baseInfo">
            <a-button type="link" class="uname" @click="goBlogDetail(blog.blogId)">{{blog.blogTitle}}</a-button>
            <span>
              <a-tag class="cursor" v-for="r in blog.user.rankList" :key="r.rankName" :color="r.rankColor">
                 {{r.rankName}}
              </a-tag>
            </span>
            <div class="title">
              发布于{{$moment(blog.blogPushTime).format('yyyy-MM-DD HH:mm:ss')}}
            </div>
          </span>
          </div>
          <span class="content-blog" v-html="blog.blogContent">

          </span>
          <div class="footer-blog">
            <span v-if="blog.isNiu === 1" style="cursor: pointer" title="点赞总数" @click="addNiu(blog.blogId)">
              <a-icon type="like-o" style="color: red"/> {{blog.blogNiu}}
            </span>
            <span v-else style="cursor: pointer" title="点赞总数" @click="addNiu(blog.blogId)">
              <a-icon type="like-o"/> {{blog.blogNiu}}
            </span>

            <a-divider type="vertical"/>
            <span title="查看评论" style="cursor: pointer" @click="goBlogDetail(blog.blogId)">
              <a-icon type="message"/> {{blog.commentCount}}
            </span>
            <a-divider type="vertical" />
            <a-tag class="cursor"  v-for="i in blog.blogTags" :key="i">{{i}}</a-tag>
          </div>
          <a-space style="margin: 5px 0">
            <a-button v-if="$store.state.user.loginUser.type !== 3"
                      type="danger" ghost size="small" @click="blogRemoveModal(blog)">
              删除
            </a-button>
          </a-space>
        </div>
      </div>
      <!--                删除博客模态框-->
      <a-modal
          :width="600"
          title="博客删除"
          :visible="blogRemoveVisible"
          :confirm-loading="blogRemoveConfirmLoading"
          @ok="blogRemoveHandleOk"
          okType="danger"
          okText="确认删除"
          cancelText="不删除了吧"
          @cancel="blogRemoveHandleCancel"
      >
        <a-form :form="blogRemoveForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
          <a-form-item label="删除类型">
            <a-radio-group v-decorator="['removeType',{ rules: [{ required: true, message: '请选择类型' }] }]">
              <a-radio value="恶意分享">
                恶意分享
              </a-radio>
              <a-radio value="恶意宣传">
                恶意宣传
              </a-radio>
              <a-radio value="违法行为">
                违法行为
              </a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item label="原因描述">
            <a-textarea
                :rows="4"
                v-decorator="['removeWhy', { rules: [{ required: true, message: '请填写原因!' }] }]"
            />
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </div>
</template>

<script>
import Comment from "@/components/home/Comment";
import {addNiu} from "@/api/blog";
import {addRecycle} from "@/api/recycle";
import encry from '@/utils/encryUtil'
export default {
  name: "Blog",
  components: {
    Comment
  },
  data(){
    return {
      commentList:[],
      all:false,
      activeKey:['1'],
      // 删除pk
      ModalText:'',
      blogRemoveVisible:false,
      currentBlog:{},
      blogRemoveConfirmLoading: false,
      blogRemoveForm: this.$form.createForm(this, { name: 'blogRemoveForm' }),
    }
  },
  watch: {
    activeKey(key) {
      console.log(key);
    },
  },
  computed:{
    shortComment(){
      return this.commentList.slice(0,2);
    }
  },
  props: {
    blog:{}
  },
  mounted() {
    this.commentList = this.blog.commentList;
  },
  methods: {
    // 查看用户详情页
    seeUserInfo(userId){
      if (userId){
        this.$router.push({
          name:'userinfo',
          params:{
            userId:encry.encry(userId)
          }
        })
      }
    },
    // 博客详情页
    goBlogDetail(blogId){
      if (blogId){
        this.$router.push({
          name:'blogDetail',
          params:{
            blogId:encry.encry(blogId)
          }
        })
      }
    },
    // 给博客点赞
    async addNiu(blogId){
      const { code,msg,data } = await addNiu(blogId);
      if (code === 200){
        this.$emit('niu',{blogId,type:data});
      } else {
        this.$message.error(msg);
      }
    },
    // 删除模态框
    blogRemoveModal(record){
      this.currentBlog = record;
      this.blogRemoveVisible = true;
    },
    // 博客删除模态框确认
    blogRemoveHandleOk(e) {
      e.preventDefault();
      const _this = this;
      this.ModalText = '操作处理中...';
      this.blogRemoveConfirmLoading = true;
      this.blogRemoveForm.validateFields((err, values) => {
        if (!err) {
          let params = {...values,mainId:_this.currentBlog.blogId,fileType:1}
          addRecycle(params).then(res => {
            const { code,msg } = res;
            if (code === 200){
              setTimeout(() => {
                this.blogRemoveVisible = false;
                this.blogRemoveConfirmLoading = false;
                _this.$message.success(msg);
                _this.blogRemoveForm.resetFields();
                _this.$emit('reload');
                _this.currentPk = {};
              }, 1000);
            } else {
              setTimeout(() => {
                this.blogRemoveVisible = false;
                this.blogRemoveConfirmLoading = false;
                _this.$message.error(msg);
              }, 1000);
            }
          }).catch(error => {
            console.log(error);
            setTimeout(() => {
              this.blogRemoveVisible = false;
              this.blogRemoveConfirmLoading = false;
              _this.$message.error("系统异常");
            }, 1000);
          })
        }else{
          this.blogRemoveConfirmLoading = false;
        }
      });
    },
    // 取消删除
    blogRemoveHandleCancel(e) {
      this.blogRemoveVisible = false;
    },
  }
}
</script>

<style lang="less" scoped>
.head-message {
  .all{
    padding: 5px;
    box-sizing: border-box;
    .left{
      float: left;
      width: 75%;
      padding: 0 5px;
      .avatar{
        margin-right: 5px;
        width: 32px;
        height: 32px;
      }
      .avatar,.baseInfo{
        float: left;
      }
      .baseInfo{
        display: inline-block;
        width: 70%;
        height: 70px;
        .uname{
          line-height: 35px;
          font-size: 14px;
          color: rgba(0,0,0,.65);;
          font-weight: 600;
        }
        .title{
          line-height: 35px;
          font-size: 14px;
          padding: 0 15px;
          color: rgba(0,0,0,.65);;
        }
      }
      .content-blog{
        display: inline-block;
        overflow: hidden;
      }
      .footer-blog{
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
      }
    }
    .right{
      float: right;
      width: 23%;
      text-align: center;
      line-height: 165px;
      .image{
        width: 200px;
        height: 170px;
      }
    }
  }
}
</style>
